<template>
    <page-view>
        <title-bar :show-back="true">电影详细信息</title-bar>
        <div class="content-box flex-1 overflow-atuo">
            <van-skeleton :loading="isLoading" animate :row="7">
            <div class="movie-info-box box-border p-[10px] h-[150px] flex flex-row relative overflow-hidden">
                <img class="w-full h-full object-cover blur-lg absolute -z-10" :src="baseURL+movieDetail.movie_pc" alt="">
                <div class="left w-[100px] h-full ">
                    <img class="h-full w-full" :src="baseURL+movieDetail.movie_pc" alt="">
                </div>
                <ul class="flex flex-col justify-between ml-[10px] text-white text-[12px]">
                    <li class="text-[20px]">{{movieDetail.movie_name}}</li>
                    <li><span class="text-[16px] text-warningColor">6.7</span>分</li>
                    <li>{{movieDetail.tags}}</li>
                    <li>{{movieDetail.duration}}分钟</li>
                    <li>{{formatDateTime(movieDetail.publicTime)}}上映</li>
                </ul>
            </div>
            <div
              class="mx-[10px] my-[15px] rounded-[5px] cursor-pointer active:bg-successColor bg-primaryColor text-white 
               h-[35px] flex justify-center items-center" @click="toPlanInfoList">
                特惠购票</div>
            <p class="movie-desc">{{movieDetail.movie_desc}}</p>
            </van-skeleton>
        </div>
    </page-view>
</template>
<script setup>
import titleBar from "../components/title-bar.vue"
import { useRoute,useRouter } from "vue-router"
import API from "../utils/API";
import { formatDateTime } from "../utils/dateTimeUtils";
import { ref,inject } from "vue";
let baseURL = inject("baseURL");
const route = useRoute();
const router = useRouter();
const movieDetail = ref({});
const isLoading = ref(true);
API.movieInfo.findById(route.query.id).then(res => {
    isLoading.value=true;
    if (res.status = "success") {
        movieDetail.value = res.data
    }
}).finally(()=>{
    isLoading.value=false;
});
const toPlanInfoList=()=>{
    router.push({
        name:"planInfoList",
        query:{
            id:route.query.id
        }
    });
}
</script>
<style scoped lang="scss">
.movie-desc {
    @apply text-[12px] px-[10px] leading-6 indent-[2em];
    /* 多行溢出省略 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>